<template>
  <div class="cart">
    <!-- 导航 -->
    <nav-bar class="nav-bar">
      <template v-slot:center>
        <div>购物车({{cartLength}})</div>
      </template>
    </nav-bar>

    <!-- 商品列表 -->
    <scroll class="content" ref="scroll"
      :pull-up-load="true"
      :probe-type="3">   
          <cart-list></cart-list>
      </scroll>
      
    
    <!-- 底部汇总 -->
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import CartList from './CartList.vue'
import CartBottomBar from './CartBottomBar.vue'
import Scroll from '../../components/common/scroll/Scroll.vue';

import { mapGetters } from 'vuex'
  export default {
    name: "Cart",
    components: {
      NavBar,
      CartList,
      Scroll,
      CartBottomBar
    },
    activated () {
      this.$refs.scroll.refresh()
      
      
    },
    computed: {
      // cartLength(){
      //   return this.$store.getters.cartLength
      // }
      // 此方式可以直接获取/映射到store里面的getters计算属性的方法
      ...mapGetters([
        'cartLength',
        'cartList'
      ])
    }
  }
</script>

<style scoped>
  .cart{
    height: 100vh;
    position: relative;
    z-index: 5;
    background-color: #fff;
    overflow: hidden;
  }
  .nav-bar{
    background-color: var(--color-tint);
    color:#fff;
    position: relative;
    left: 0;
    top: 0;
  }
  .content{
    height: calc(100% - 44px - 49px - 40px);
    overflow: hidden;
  }
 
</style>
